<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>填充轮播元素 - 以图片为例</legend>
</fieldset>

<div class="layui-carousel" id="test10">
    <div carousel-item="">
        <div><img src="http://sta.lymtr.cn/hgits/province/P001.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P002.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P003.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P008.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P005.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P0011.jpg"></div>
        <div><img src="http://sta.lymtr.cn/hgits/province/P007.jpg"></div>
    </div>
</div>


<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;


        //图片轮播
        carousel.render({
            elem: '#test10'
            , width: '778px'
            , height: '440px'
            , interval: 5000
        });

        //事件
        carousel.on('change(test10)', function (res) {
            layer.msg("切换图片");
            console.log(res)
        });


    });
</script>

</body>
</html>
